/* eslint-disable */
<template>
  <div class="china-map flex-row-vc">
    <div class="china-container flex-row">
      <div class="left-box flex-row-vc">
      <div class="map-count-to">
          <div class="count-to-title">链上地理标志数量</div>
          <div class="count-to-box">
            <countTo ref="countTo" :start-val="startVal" :end-val="endVal" :duration="duration" @mountedCallback="mountedCallback" />
          </div>
        </div>
        <div class="left-top flex-row">
          <div class="tonenumbox flex-row">
            <div class="iconbox">
              <img src="img/icon_product.png"/>
            </div>
            <div class="tonetext">
            <h3>{{productCount}}<span>亿元</span></h3>
            <p>产值</p>
            </div>
          </div>
          <div class="tonenumbox flex-row">
            <div class="iconbox">
              <img src="img/icon_nonghu.png"/>
            </div>
            <div class="tonetext">
            <h3>{{famerCount}}<span>万户</span></h3>
            <p>农户数量</p>
            </div>
          </div>
        </div>
        <div class="line-section">
          <TrendColumn ref="dlbz" :titletext="'每年地理标志增长趋势'" :echartsdata="dlbz_data" />
        </div>
        <div class="line-section">
          <TrendLine ref="czzj" :titletext="'产值增加趋势'" :type="1" :echartsdata="czzj_data" />
        </div>
        <div class="line-section">
          <TrendLine ref="sylh" :titletext="'收益农户数量增长趋势'" :type="2" :echartsdata="sylh_data" />
        </div>
      </div>
      <div class="map-box flex-row">
        <echartmap-china ref="map" />
        <div class="legend-container">
          <div v-for="(item, index) in legends" :key="index" class="legend-row flex-row">
            <div class="legend-item" :style="{'backgroundColor': item.color}"></div>
            <div class="legend-label">{{item.label}}</div>
          </div>
        </div>
      </div>
      <div class="right-box flex-row-vc">
        <div class="node-list">
          <p class="node-list-title">链上信息记录</p>
          <div class="node-list-box">
            <vueSeamless
              ref="seamless"
              :data="msgList"
              :class-option="msgListOption"
              class="seamless-warp"
            >
              <div
                v-for="(item, index) in msgList"
                :key="index"
                class="scorll-item"
              >
                <div class="item-left-box">
                  <img src="img/icon_msg.png" alt="" />
                </div>
                <div class="item-right-box">
                  <p class="item-node-title">
                    <i>{{ item.title }}</i>
                  </p>
                  <p class="item-time">
                    <span>生成时间：</span><span>{{ item.createTime }}</span>
                  </p>
                  <p class="item-hash">
                    <span>哈希值：</span><span>{{ item.hash }}</span>
                  </p>
                </div>
              </div>
            </vueSeamless>
          </div>
        </div>
        <div class="product">
          <div class="top">
            <div class="top-left">
              <div class="first">
                <span class="h1">{{ product.title }}</span>
                <span class="h1-text">{{ product.name }}</span>
              </div>
              <div class="text">生成时间：{{product.createTime}}</div>
              <div class="text">哈希值：{{product.hash}}</div>
            </div>
            <div class="top-right">
              <img :src="product.url" alt="" />
            </div>
          </div>
          <vueSeamless
            :data="[product.des]"
            :class-option="proListOption"
            class="seamless-warp"
            id="pro"
            v-if="show"
          >
            <div id="content" class="content">
              {{ product.des }}
            </div>
          </vueSeamless>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import TrendLine from "@/components/TrendLine";
import vueSeamless from "vue-seamless-scroll";
import TrendColumn from "@/components/TrendColumn";
import echartmapChina from "components/echarts/EchartMapChina";
import countTo from 'vue-count-to'
export default {
  name: "chinaMap",
  components: {
    TrendColumn,
    TrendLine,
    vueSeamless,
    echartmapChina,
    countTo
  },
  data() {
    return {
      product_obj: require('@static/china.json'),
      productCount: 133,
      famerCount: 21,
      dlbz_data: {
        "2021": 976,
        "2022": 1375,
        "2023": 2208,
        "2024": 2758,
        "2025": 3684
      },
      czzj_data: {
        "2021": 976,
        "2022": 1375,
        "2023": 2208,
        "2024": 2758,
        "2025": 3684
      },
      sylh_data: {
        "2017": 808,
        "2018": 900,
        "2019": 808,
        "2020": 1829,
        "2021": 2301
      },
      index: 0,
      product: {},
      showLevel1List: false,
      showLevel2List: false,
      selectValue: "世界",
      hoverValue: "世界",
      level2HoverValue: "",
      value: [],
      options: [],
      addNumber: 0,
      endVal: 0,
      startVal: 0,
      duration: 3000,
      nodeList: [],
      msgList: [
        {
          title: "Block 8",
          createTime: "2021/04/10",
          hash: "adsfssdadjsjfljdslfjsdjsd"
        },
        {
          title: "Block 7",
          createTime: "2021/04/10",
          hash: "adsfssdadjsjfljdslfjsdjsd"
        },
        {
          title: "Block 6",
          createTime: "2021/04/10",
          hash: "adsfssdadjsjfljdslfjsdjsd"
        },
        {
          title: "Block 5",
          createTime: "2021/04/10",
          hash: "adsfssdadjsjfljdslfjsdjsd"
        },
        {
          title: "Block 4",
          createTime: "2021/04/10",
          hash: "adsfssdadjsjfljdslfjsdjsd"
        },
        {
          title: "Block 3",
          createTime: "2021/04/10",
          hash: "adsfssdadjsjfljdslfjsdjsd"
        },
        {
          title: "Block 2",
          createTime: "2021/04/10",
          hash: "adsfssdadjsjfljdslfjsdjsd"
        },
        {
          title: "Block 1",
          createTime: "2021/04/10",
          hash: "adsfssdadjsjfljdslfjsdjsd"
        }
      ],
      show: true,
      msgNum:'',
      legends: []
    };
  },
  computed: {
    proListOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        // switchDelay: 2000
      };
    },
    msgListOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.msgList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 90, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  watch: {
    index(val) {
      let p = this.product_obj.rank[val];
      let b = this.createBlock();
      p.createTime = b.createTime;
      p.hash = b.hash;
      this.product = p;
    }
  },
  created() {
    this.getBlockData();
  },
  mounted() {
    let p = this.product_obj.rank[0];
    let b = this.createBlock();
    p.createTime = b.createTime;
    p.hash = b.hash;
    this.product = p;
    this.timer = setInterval(() => {
      if (this.index === 2) {
        this.index = 0
      } else {
        this.index++
      }
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      })
    }, 10000)
  },
  updated() {
    // this.$nextTick(() => {
    //   let pro = document.getElementById('content')
    //   // this.timer = null;
    //   // clearInterval(this.timer);

    //   if (pro && pro.clientHeight > 360) {
    //     this.proListOption.singleHeight = 100
    //   } else {
    //     this.proListOption.singleHeight = 50
    //   }
    // })
  },
  methods: {
    getBlockData(){
      this.msgList=[];
      for(let i = 0; i<8;i++){
        this.msgList.push(this.createBlock());
      }
      const that = this;
      setInterval(function(){
        that.msgList.push(that.createBlock())
      },3000)
    },
    createBlock(){
      let msg = { title: 'Block 8', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' }
      let num = this.msgNum;
      if(this.msgNum==0){
        for(let i =0;i<3;i++){
          num+=Math.floor(Math.random()*10);
        }
      }
      let h = '';
      for(let i = 0;i<16;i++){
        h+=Math.floor(Math.random()*16).toString(16);
      }
      h+= '...'
      
      msg.title=`Block ${num}`;
      msg.createTime=this.utils.dateFormat(new Date(), 'YYYY/MM/DD hh:mm:ss');
      msg.hash = h;
      this.msgNum =parseInt(num)+1;
      return msg;
    },
    level1Click(item) {
      if (item.children.length) {
        this.showLevel2List = !this.showLevel2List;
        return;
      }
      this.selectValue = item.label;
    },
    level2Click(child) {
      this.level2HoverValue = child.label;
      this.selectValue = child.label;
      this.showLevel1List = false;
      this.showLevel2List = false;
    },
    hoverSelectItem(item) {
      // debugger
      if (item.level === 1) {
        this.hoverValue = item.label;
        this.showLevel2List = true;
      } else {
        this.level2HoverValue = item.label;
      }
    },
    handleChange(value) {
      console.log(value);
    },
    mountedCallback() {
      // setInterval(() => {
      this.startVal = this.endVal;
      //   this.endVal += Math.floor(Math.random() * (100 - 1)) + 1;
      // }, this.duration + 1000);
    },
    getGlobalMapData() {
      const self = this
      // require(['@static/china.json'], function(json) {
      //   self.analysisData = json.node_list;
      //   self.hotData = json.hotList
      //   self.$refs.map.init(json.node_list, json.hotList)
      // })
      require(['@static/各省数据/福建省.json'], function(json) {
        self.hotData = json.hotList
        self.$refs.map.init(json.node_list, json.hotList)
      })
    },
    update(opt) {
      const self = this
      if (opt.type === 'china') {
        require(['@static/china.json'], function(json) {
          self.$refs.map.init(json.node_list, json.hotList)
          self.$refs.dlbz.update(json.dlbz_data)
          self.$refs.czzj.update(json.czzj_data)
          self.$refs.sylh.update(json.sylh_data)
          self.productCount = json.pruduct
          self.famerCount = json.famer_number
          self.product_obj = json
          let p = self.product_obj.rank[0];
          let b = self.createBlock();
          p.createTime = b.createTime;
          p.hash = b.hash;
          self.product = p;
          self.endVal = json.count
          self.legends = [{
            color: 'rgba(147,255,195, 1)',
            label: '1000以下'
          }, {
            color: 'rgba(74,234,255, 1)',
            label: '1000 - 2000'
          }, {
            color: 'rgba(26,159,255, 1)',
            label: '2000 - 3000'
          }, {
            color: 'rgba(255, 134, 74, 1)',
            label: '3000 - 5000'
          }, {
            color: 'rgba(255, 74, 74, 1)',
            label: '5000以上'
          }]
          self.legends.reverse()
        })
      } else {
        if (opt.name) {
          let dataName = opt.name
          require([`@static/各省数据/${dataName}.json`], function(json) {
            self.$refs.map.init(json.node_list, json.hotList, opt.value)
            self.$refs.dlbz.update(json.dlbz_data)
            self.$refs.czzj.update(json.czzj_data)
            self.$refs.sylh.update(json.sylh_data)
            self.productCount = json.pruduct
            self.famerCount = json.famer_number
            self.product_obj = json
            let p = self.product_obj.rank[0];
            let b = self.createBlock();
            p.createTime = b.createTime;
            p.hash = b.hash;
            self.endVal = json.count;
            self.product = p;
            self.legends = [{
              color: 'rgba(147,255,195, 1)',
              label: '10以下'
            }, {
              color: 'rgba(74,234,255, 1)',
              label: '10 - 20'
            }, {
              color: 'rgba(26,159,255, 1)',
              label: '20 - 30'
            }, {
              color: 'rgba(255, 134, 74, 1)',
              label: '30 - 50'
            }, {
              color: 'rgba(255, 74, 74, 1)',
              label: '50以上'
            }]
            self.legends.reverse()
          })
        } else {
          console.log('暂无数据')
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.china-map {
  position: relative;
  width: 100%;
  height: calc(100% - 110px);
  padding: 0 40px;
  overflow: hidden;
  .china-container {
    flex: 1 1 auto;
    height: 100%;
    text-align: left;
    .right-box {
      flex: 0 0 432px;
      height: 100%;
      overflow: hidden;
    }
    .left-box, .right-box {
      color: #fff;
    }
    .left-box {
      padding-top: 130px;
      flex: 0 0 366px;
      height: 100%;
      overflow: hidden;
      .map-count-to {
        position: relative;
        width: 100%;
        text-align: left;
        margin-bottom: 40px;
        flex: 0 0 auto;
        .count-to-title{
          font-size:22px;
          font-weight:700;
        }
        .map-count-to {
          font-size: 14px;
        }
        .count-to-box {
          font-size: 40px;
          text-shadow: 0 0 16px rgba(0, 212, 255, 0.65);
          display: inline-block;
          font-weight:700;
        }
      }
      .left-top{
        // align-items: center;
        .iconbox{
          width:56px;
        }
        .tonenumbox{
          // align-items: center;
          margin-right:34px;
          &:last-child{
            h3{
              color:#5cd2f4;
            }
          }
          p{
            color:#fafafa;
            font-size:14px;
            margin-top:6px;
          }
          .tonetext{
            margin-left:14px;
          }
          h3{
            display:block;
            flex-direction:column;
            color:#ffe31a;
            font-size:20px;
            span{
              font-size:12px;
              font-weight:normal;
              margin-left:6px;
            }
          }
        }
      }
      .line-section {
        flex: 1 1 auto;
        padding-top: 20px;
        height: 200px;
      }
    }
    .map-box {
      padding: 40px;
      flex: 1;
      // align-items: center;
      height: 100%;
      position: relative;
      .legend-container {
        position: absolute;
        bottom: 20px;
        right: 20px;
        .legend-row {
          height: 16px;
          line-height: 16px;
          margin-bottom: 10px;
          .legend-item {
            height: 14px;
            width: 14px;
            margin-right: 10px;
          }
          .legend-label {
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
    .right-box {
      min-width: 360px;
      color: #fff;
      text-align: left;
      .node-list {
        flex: 1 1 auto;
        height: 200px;
        .node-list-box {
          margin-top: 10px;
          overflow: hidden;
          height: calc(100% - 50px);
          .scorll-item {
            // height: 89px;
            border-radius: 4px;
            width: 100%;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 10px;
            display: flex;
            .item-left-box {
              width: 35px;
              margin: 10px 16px 0 10px;
              img {
                width: 100%;
              }
            }
            .item-right-box {
              line-height: 22px;
              .item-node-title {
                font-size: 18px;
                padding-top: 12px;
              }
              .item-time,
              .item-hash {
                font-size: 12px;
                opacity: 0.6;
              }
            }
          }
        }
      }
      .product {
        height: 520px;
        opacity: 0.6;
        background: #081b2e;
        // background-image: radial-gradient(
        //   1% 43%,
        //   rgba(94, 228, 255, 0.2) 0%,
        //   rgba(97, 233, 255, 0) 38%
        // );
        border: 1px solid #64e0f8;
        box-shadow: 0px 0px 20px 0px rgba(37, 227, 255, 0.1);
        border-radius: 28px;
        padding: 24px;
        margin-top:30px;
        .top {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .top-left {
            text-align: left;
            span.h1 {
              color: #1accff;
              letter-spacing: 0;
              text-shadow: 0 0 16px rgba(0, 212, 255, 0.65);
              font-weight: 700;
              text-align: left;
              font-size: 26px;
            }
            span.h1-text {
              line-height: 25px;
              font-family: PingFangSC-Semibold;
              font-size: 22px;
              color: #ffffff;
              letter-spacing: 0;
              font-weight: 600;
              margin-left: 16px;
            }
            .text {
              height: 26px;
              line-height: 26px;
              opacity: 0.6;
              font-family: SourceHanSansSC-Medium;
              font-size: 16px;
              color: #ffffff;
              letter-spacing: 0;
              font-weight: 500;
              text-align: left;
              margin-top: 9px;
              &:last-of-type {
                margin-top: 0;
              }
            }
          }
          .top-right {
            width: 90px;
            height: 90px;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        .seamless-warp {
          height: 360px;
          overflow: hidden;
          margin-top: 35px;
        }
        .content {
          width: 100%;
          // height: 500px;
          font-family: PingFangSC-Semibold;
          font-size: 18px;
          color: #ffffff;
          letter-spacing: 0;
          font-weight: 600;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
